<!--
 * @Author: baoshijie baoshijie
 * @Date: 2023-08-25 09:32:13
 * @LastEditors: baoshijie baoshijie
 * @LastEditTime: 2023-08-25 10:10:11
 * @FilePath: \notam-web\src\components\multipleSelectAll\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div>
        <el-select
            v-model="selectVal"
            :placeholder="placeholder"
            clearable
            style="width: 240px"
            multiple
            collapse-tags
            collapse-tags-tooltip
            @change="changeSelect"
        >
            <el-checkbox v-model="checked" @change="selectAll" style="margin-left: 20px">
                全选
            </el-checkbox>
            <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            />
        </el-select>
    </div>
</template>
<script setup>
const props = defineProps({
    modelValue: {
        type: Array,
        default: () => [],
    },
    options: {
        type: Array,
        default: () => [],
    },
    placeholder: {
        type: String,
        default: '请选择',
    },
});
const emits = defineEmits(['update:modelValue']);
const selectVal = computed({
    get() {
        return props.modelValue;
    },
    set(val) {
        emits('update:modelValue', val);
    },
});

const checked = ref(false);
function selectAll() {
    if (checked.value) {
        selectVal.value = props.options.map((item, index) => {
            return item.value;
        });
    } else {
        selectVal.value = [];
    }
}
function changeSelect(val) {
    checked.value = val.length == props.options.length;
}
</script>
